<template>
  <div class="container" style="min-height: 100%">
      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
        <x-header :left-options="{showBack: false}" class="my-header" title="护士上门" ></x-header>
        <div style="min-height: 100%">
          <blur :blur-amount=10 :url="avatar">
            <p class="center"><img :src="avatar"></p>
            <p class="center">{{realName}}</p>
          </blur>
          <grid>
            <grid-item  :key label="订单" class="index"  link="/order_list">
              <img src="../../assets/user_center/me_order@3x.png" slot="icon"/>
            </grid-item>
            <grid-item  :key label="资讯" class="index" link="/information">
              <img src="../../assets/user_center/me_news@3x.png" slot="icon"/>
            </grid-item>
          </grid>
          <panel :footer="footer" :list="list" type="3"></panel>
        </div>

        <tabbar slot="bottom" id="tabbar">
          <tabbar-item :link="{path:'/',replace:true}" >
            <img slot="icon" src="../../assets/home@3x.png">
            <span slot="label">主页</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/service_item',replace:true}" >
            <img slot="icon" src="../../assets/nurse@3x.png">
            <span slot="label">护士上门</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/user_center',replace:true}" selected>
            <img slot="icon" src="../../assets/me_def@3x.png">
            <span slot="label">个人中心</span>
          </tabbar-item>
        </tabbar>
      </view-box>
  </div>
</template>

<script>
  import {Panel,Grid, GridItem,Blur, XButton, Divider,XHeader, Tabbar, TabbarItem, ViewBox, Drawer } from 'vux'
  export default {
    data() {
      return {
        avatar:'/static/img/woman@2x.png',            //用户头像
        realName:'',            //用户姓名

        title:'',
        showMenu: false,
        list: [
            {
          title: '病患管理',
          desc: '',
          url: {
            path: '/patients',
            replace: false
          },
        },
          {
            title: '设置',
            desc: '',
            url: '/setting'
          },
        ],
        footer: {
          title: this.$t('more'),
          url: 'http://vux.li'
        }
      }
    },
    mounted(){
      this.checkToken()
      this.getBasic()
    },
    methods:{
      checkToken(){         //检查登录状态
        this.Ajax('get','/javaapi/oauth2/token/status',{},(res)=>{
          if(res.body.sc=='20001'){
            this.isLogin=true
            this.$router.push({
              path:'/login',
              query:{
                originPath:'/user_center',
                isLogin:true
              }
            })
          }
        })
      },
      getBasic(){
        this.Ajax('get','/javaapi/consumer/basicInfo',{},(res)=>{
          if(res.avatar){
            this.avatar=res.avatar;
          }
          this.realName=res.realName
        })
      },
      listenTitle:function(data){
        this.title=data
      },
      turnToOrder(){
        this.$router.push({
          path:'order_list'
        })
      }
    },
    components: {
      XHeader,
      Tabbar,
      TabbarItem,
      ViewBox,
      Drawer,
      Divider,
      Panel,Grid, GridItem,Blur
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .services{
    height: 70px;
    background-color: white;
  }
  .center {
    text-align: center;
    padding-top: 20px;
    color: #fff;
    font-size: 18px;
  }
  .center img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #ececec;
  }
  .index i {
    font-size: 28px;
    color: #000;
  }
  .index{
    background-color: white;
  }
  .weui-grids:before{
    border-top: 0;
  }
  .weui-grid:before {
    border-right: 0;
  }

  .weui-grid:after {
    border-bottom: 0;
  }
  #tabbar{
    position: fixed;
    bottom:0
  }
</style>
